<!DOCTYPE html>
<html>
<head  >
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
		                                     initial-scale=1,
		                                     maximum-scale=1,
		                                     user-scalable=no">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <link rel="stylesheet" href="css/simple.css">
    <link rel="stylesheet" href="css/atelier-dune-light.css">
    <link rel="stylesheet" href="css/viewer.css">
    <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
    <title id="title_head">我爱面试-内容</title>
    <link rel="shortcut icon" href="image/favicon.ico" type=”../image/x-icon”/>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #FBFBFB;
        }

        .neiru {
            background-color: #FFFFFF;
            border-radius: 10px;
        }


        .nav2 img:hover {
            cursor: pointer;
        }

        .meiri div div {
            margin: 20px;

        }

        .meiri div div:hover {
            transform: scale(1.1);
        }


        .suiji ul li:hover {
            background-color: #d0d4df;
            cursor: pointer;
        }

        .zx ul {
            border-radius: 6px;
            border: 1px silver solid;
            margin: 10px 15px 25px 15px;
            box-shadow: 1px 1px 5px silver;
            padding: 15px;
        }

        .zx ul:hover {
            transform: scale(1.02);
            cursor: pointer;
        }

        .fenye img {
            cursor: pointer;
        }

        .fenye span {
            cursor: pointer;
        }

        .youce ul li:hover {
            background-color: #dfd4d5;
            cursor: pointer;
        }


        .title1 {
            animation: name2 10s linear infinite alternate both;
            cursor: pointer;
        }

        @keyframes name2 {
            0% {

                color: #000000;

            }
            10% {

                color: #9be200;

            }
            20% {

                color: #90d6d6;

            }
            30% {

                color: #dada00;

            }
            40% {

                color: #4ade00;

            }
            50% {

                color: #e699e6;

            }
            60% {

                color: #d6006b;

            }
            70% {

                color: #8c8cd0;

            }
            80% {

                color: #8e46d5;

            }
            90% {

                color: #00b900;

            }

            100% {
                color: #d04500;
            }
        }


        .shous11 {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 20;
            display: none;
        }

        .cxul li {
            border-top: none;
            border-left: none;
            border-right: none;
            margin-top: 10px;

        }

        .cxul li:hover {
            cursor: pointer;
            background-color: #e3e3e3;

        }


        .ul_1 .bt1 {
            color: rosybrown;
        }

        #shous{
            /*去除边框*/
            border:none;
            /*去除点击后的边框*/
            box-shadow: 0px 0px 0px 0px;
            /*添加下划线  */
            border-bottom:#8D8D8D 1px solid;
            /*去掉默认背景颜色*/
            -webkit-box-shadow: 0 0 0 1000px white inset;

            color: rgba(110, 107, 94, 0.71);

        }


        #shous::-webkit-input-placeholder {
            /* Chrome/Opera/Safari */
            color: rgba(110, 107, 94, 0.18);
        }

        #itmes-1 li:hover{
            background: #8D8D8D;
        }
    </style>



</head>
<body>

<div id="app">

    <ul class="nav justify-content-center fixed-top">
        <li class="nav-item">
            <a class="nav-link  title1" href="#"  > 我爱面试</a>
        </li>
        <li class="nav-item">
            <!-- Button trigger modal -->
            <img src="image/搜索.png"  width="34" height="34"
                 id="sous432" data-toggle="modal" data-target="#staticBackdrop"/>
        </li>
    </ul>


<div class="container-fluid">


    <!-- Modal -->
    <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">

                        <input id="shous" size="120"  class="form-control form-control-lg" type="text" @input="input_shous()" placeholder="请输入你要查询的内容">

                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body " >
                    <ul class="list-group cxul" >
                        <li class="list-group-item" v-for="(item, index) in shous_items">
                            <a v-bind:href="item.url_params"  target="_blank" v-html="item.head" class="text-decoration-none text-muted"></a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
    </div>


<br><br>
    <div class="row m-xl-4  ">
        <!--float-right-->
        <div class="col-12    neiru shadow  bg-white  ">
            <div class="row">
                <div class="col-12 text-center h1  mt-3">{{contents.head}}</div>
                <div class=" col-12 text-right" style="font-size: 11px">
                    <span>最近更新时间:</span><span>2021/1/11</span> <br>
                </div>

            </div>


            <div class=" row">

                <div class=" col-12 ul_1_1">
                    <p class="h2 mb-5"><span class=" bt1">#</span>&nbsp;<span class=" bt2">答</span></p>
                    <p v-for="(stu,index) in arraystr">
                        {{stu}}
                    </p>

                </div>
                <div class="ul_1_2  col-12    pre_1    mt-md-2">
                    <p class="h2"><span class=" bt1">#</span>&nbsp;<span class=" bt2">内容解析</span></p>
                    <div id="content"  v-highlight>

                    </div>
                </div>

            </div>
        </div>


    </div>

    <div class=" row   m-xl-4  " style="margin-top: 10px">

        <div class="col-12   neiru shadow  bg-white  pinglun " style="border: 1px silver solid;    ">

        </div>


    </div>

</div>

</div>



<script src="../code/public_code.js"></script>
<script src="../code/jquery-3.4.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="js/highlight.pack.js"></script>
<script src="js/viewer.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

<script>





</script>
<script>
    var  catalogueId

    function GetUrlParms()
    {
        var args = new Object();
        var query = location.search.substring(1); //获取查询串
        var pairs = query.split("&"); //在逗号处断开
        for (var i = 0; i < pairs.length; i++)
        {
            var pos = pairs[i].indexOf('='); //查找name=value
            if (pos == -1) continue; //如果没有找到就跳过
            var argname = pairs[i].substring(0, pos); //提取name
            var value = pairs[i].substring(pos + 1); //提取value
            args[argname] = unescape(value); //存为属性
        }
        return args;
    }

    var args = new Object();
    args = GetUrlParms();

    //如果要查找参数key:
    if (args["catalogueId"] != undefined)
    {
        //如果要查找参数key:
        catalogueId = args["catalogueId"];

    }

    console.log(catalogueId)



    var div=$(" <iframe src=\"comment/comment_html/comment.html?catalogueId="+catalogueId+"\" id='iframe1' width=\"100%\"  frameborder=\"0\">\n" +
        "\n" +
        "            </iframe>")



    $(".pinglun").append(div)


    //自适应iframe  内容高度
    function reinitIframe() {
        var iframe = document.getElementById("iframe1");
        try {
            var bHeight = iframe.contentWindow.document.body.scrollHeight;
            var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
            var height = Math.max(bHeight, dHeight);
            iframe.height = height;

        } catch (ex) {
        }
    }
    window.setInterval("reinitIframe()", 200);

    var vu=new Vue({
        el:"#app",
        data:{
            contents:{},
            arraystr: [],
            shous_items: new Array(),
            arr: new Array(),
        },
        created(){

            //发送get请求
            this.$http.get('http://'+http_ip+':8083/feign_article/articleId?articleId='+catalogueId).then(function (res) {
                this.contents = res.data.data;

                $("#title_head").text( this.contents.head)
                $("#title_head").after("<meta name=\"keywords\" content=\""+this.contents.head+" \"/>")

                var description_head=this.contents.answer
                var des=description_head.split("\n")
                var des_str=""
                for (let i = 0; i <des.length ; i++) {
                    if(des[i]!==""){
                        des_str+=des[i].trim();
                    }
                }
                $("#title_head").after("<meta name=\"description\" content=\"简介:"+des_str.substring(0,100)+"...\"/>")


                this.arraystr= this.contents.answer.trim().split("\n");
                document.getElementById('content').innerHTML = marked(this. contents.context);


                //images 属性内所有图片都支持放大查看
                var viewer = new Viewer(document.getElementById('content'), {
                    url: 'src' //需要加载的放大图的属性
                });


                var w = $("#content").width() //适配窗体

                //图片自适应 并且居中
                $("#content img").each(function (index, e) {
                    if(w>1000){
                        $(e).css("width","30%")
                        $(e).css("border-radius","10px")
                        $(e).parent().css("text-align","center")
                    }else{
                        $(e).css("width","60%")
                        $(e).css("border-radius","10px")
                        $(e).parent().css("text-align","center")
                    }
                })



            }, function () {
                console.log('请求失败处理');
            });

        },
        methods:{
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            index:function () {

                location.href="index.html"

            },
            input_shous:function(){
                console.log("a")

                var shous=  $("#shous").val()
                if(shous.trim()==""){
                    return;
                }

                this.$http.get('http://'+http_ip+':8083/feign_solr?title='+shous).then(function (res) {
                    this.shous_items= $.parseJSON(res.bodyText)
                    for (let i = 0; i <this.shous_items.length ; i++) {
                        this.shous_items[i].url_params = "context.html?"+this.shous_items[i].url_params
                    }

                    console.log( this.shous_items[0].url_params)

                }, function () {
                    console.log('请求失败处理');
                });


            },

        },
        mounted () {

            window.onresize = function () { // 定义窗口大小变更通知事件
                var w = $("#content").width() //适配窗体
                console.log(w)
                //图片自适应 并且居中
                $("#content img").each(function (index, e) {
                    if(w>1000){
                        $(e).css("width","30%")
                        $(e).css("border-radius","10px")
                        $(e).parent().css("text-align","center")
                    }else{
                        $(e).css("width","60%")
                        $(e).css("border-radius","10px")
                        $(e).parent().css("text-align","center")
                    }
                })
            };
        },

    })
    Vue.directive('highlight',function (el) {
        let blocks = el.querySelectorAll('pre code');
        blocks.forEach((block)=>{
            hljs.highlightBlock(block)
        })
    })




</script>



<script>
    


    function width_code(rowNum, ul) {
        if (rowNum > 1000) {
            // let width = $(ul).width();
            $(ul).css("width", "40px")
        }
        if (rowNum > 10000) {
            // let width = $(ul).width();
            $(ul).css("width", "50px")
        }
        if (rowNum > 100000) {
            // let width = $(ul).width();
            $(ul).css("width", "60px")
        }
    }

    function ini_1(serial, ul) {

        //高度/行高=文本行数
        var rowNum = Math.round($(serial).height() / parseFloat($(serial).css("line-height")));
        // width_code(rowNum,ul)
        // for (var i = 1; i <= rowNum; i++) {
        //     $(ul).append("<li>" + i + "</li>")
        // }
    }



</script>
<script>
    // var htmlobj = $.ajax({url: "../md/Jsp基础教程.md", async: false});
    // document.getElementById('content').innerHTML = marked(htmlobj.responseText);
</script>


<script>



    (function () {

        var nav = $('nav'),
            menu = $('nav h1'),
            main = $('main'),
            open = false,
            hover = false;

        menu.on('click', function () {
            open = !open ? true : false;
            nav.toggleClass('menu-active');
            main.toggleClass('menu-active');
            nav.removeClass('menu-hover');
            main.removeClass('menu-hover');
        });
        menu.hover(
            function () {
                if (!open) {
                    nav.addClass('menu-hover');
                    main.addClass('menu-hover');
                }
            },
            function () {
                nav.removeClass('menu-hover');
                main.removeClass('menu-hover');
            }
        );

    })();

    $(function () {
        var kg = 0;

        $(".container-fluid").click(function () {
            var nav = $('nav');
            nav.removeClass('menu-active');

            $(".shous11").hide()
            kg = 0
        })


        $(document).scroll(function () {
            $(".div_md").show()
            var nav = $('nav');
            nav.removeClass('menu-active');
            var y = $('body').scrollTop() + $('html').scrollTop()
            var x = $('body').scrollLeft() + $('html').scrollLeft()


            var nav = $(".div_md").css("z-index", "10");
            $(".div_md").offset({
                left: x,
                top: y
            })

        })



        $(document).scroll(function () {
            var y = $('body').scrollTop() + $('html').scrollTop()
            var x = $('body').scrollLeft() + $('html').scrollLeft()
            var wh = $('body').width()
            var so = $('.shous11').width()

            var nav = $(".shous11").css("z-index", "20");
            $(".shous11").offset({
                left: x + (wh - so) / 2 - 30,
                top: y + 100
            })


        })


        $(".fye").click(function () {
            $(".fenyefor").show()
        })

        $(".sub").click(function () {
            $(".fenyefor").hide()
        })






        $("#sous432").click(function () {
            if (kg == 0) {
                $(".shous11").show()
                kg = 1;

                var y = $('body').scrollTop() + $('html').scrollTop()
                var x = $('body').scrollLeft() + $('html').scrollLeft()
                var wh = $('body').width()
                var so = $('.shous11').width()

                var nav = $(".shous11").css("z-index", "20");
                $(".shous11").offset({
                    left: x + (wh - so) / 2 - 30,
                    top: y + 100
                })

            } else {
                $(".shous11").hide()
                kg = 0;
            }

        })





           



        function orientationChange() {
            switch (window.orientation) {
                case 0:
                    $(".shous11").hide()
                    kg = 0;
                    
                    break;
                case -90:
                    $(".shous11").hide()
                    kg = 0;
                   
                    break;
                case 90:
                    $(".shous11").hide()
                    kg = 0;
                   
                    break;

            }
        }


        window.addEventListener('orientationchange', orientationChange);

        // 窗体大小发生变化
        $(window).resize(function () {
            $(".shous11").hide()
            kg = 0;
           
        });


        //鼠标悬浮
        $(".ul_1_1").mouseenter(function () {

            $(".ul_1_1 .bt1").css("color", "#e22f2f")
            $(".ul_1_1 .bt2").css("color", "#7dc6a7")
        })



        //鼠标离开
        $(".ul_1_1").mouseleave(function () {
            $(".ul_1_1 .bt1").css("color", "rosybrown")
            $(".ul_1_1 .bt2").css("color", "#3d3c3c")
        })


        //鼠标悬浮
        $(".ul_1_2").mouseenter(function () {

            $(".ul_1_2 .bt1").css("color", "#e22f2f")
            $(".ul_1_2 .bt2").css("color", "#ecd278")
        })



        //鼠标离开
        $(".ul_1_2").mouseleave(function () {
            $(".ul_1_2 .bt1").css("color", "rosybrown")
            $(".ul_1_2 .bt2").css("color", "#3d3c3c")
        })

    })


</script>



</body>
</html>
